<template>
	<section

		class='layout-admin'>
		<aside class="aside">
			<div
				class="logo"
				@click="$router.push('/')"
			>
				<img src="@/assets/logo.svg" alt="">
				<span class="logo-text">便利店 · 在线</span>
			</div>
			<nav class="nav">
				<el-menu
					:default-active="activeNav"
					:default-openeds="defaultOpened"
					:router="true"
					background-color="#000c17"
					text-color="hsla(0,0%,100%,.65)"
				>
					<el-submenu
						v-for="navItem in nav"
						:key="navItem.title"
						:index="navItem.route"
					>
						<template slot="title">
							<i :class="navItem.icon"></i>
							<span>{{navItem.title}}</span>
						</template>
						<el-menu-item
							v-for="menuItem in navItem.children"
							:key="menuItem.title"
							:index="menuItem.route">{{menuItem.title}}
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</nav>
		</aside>
		<div class="container">
			<header class="header">
				<div class="header__main">

				</div>
				<div class="header__sub">
					<el-dropdown
						trigger="click"
						@command="clickCommand"
						popover-class="fuzhao"
					>
						<el-avatar
							style="cursor: pointer"
							size="medium"
							src="/user.png"></el-avatar>
						<el-dropdown-menu slot="dropdown" class="admin-dropdown">
							<el-dropdown-item command="userInfo">
								<p class="username">{{userInfo.username}}</p>
								<p class="user-phone">{{userInfo.phone}}</p>
							</el-dropdown-item>
							<el-dropdown-item
								:divided="true"
								command="logout">退出登录
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</header>
			<div class="layout__main">
				<div class="view__main">
					<router-view/>
				</div>
			</div>
			<c-footer/>
		</div>
	</section>
</template>

<script>
  /**
   *
   *
   *
   */
  import {mapState} from 'vuex'
  import nav from './nav'
  import cFooter from '../../components/c-footer'

  export default {
    name: "index",
    data() {
      return {
        nav: nav,
        activeNav: '',
        defaultOpened: []
      }
    },
    computed: {
      ...mapState([
        'userInfo'
      ]),
    },
    mounted() {
      let {path} = this.$route
      let defaultOpened = this.defaultOpened,
        activeNav = path
      nav.forEach(({route, pattern}) => {
        if (pattern.test(path) && !defaultOpened.includes(path)) {
          defaultOpened.push(route)
        }
      })
      switch (path) {
        case '/goods/edit':
          activeNav = '/goods/manage'
          break
      }
      this.activeNav = activeNav
      this.defaultOpened = defaultOpened
    },
    methods: {
      infiniteScroll() {
        this.$bus.$emit('infinite-scroll')
      },
      clickCommand(command) {
        switch (command) {
          case 'userInfo':
            this.$router.push('/admin/info')
            break
          case 'logout':
            this.$axios.get('/user/logout')
            this.$router.replace('/login')
            this.$message({
              type: 'success',
              message: '已为您退出登录'
            })
            break
        }
      }
    },
    components: {
      cFooter
    }

  }
</script>

<style lang='less'>
	.layout-admin {
		flex-grow: 1;
		width: 100%;
		height: 100%;
		min-height: 100%;
		overflow: auto;
		display: flex;
		flex-direction: row;
		background-color: #f0f2f5;

		.aside {
			width: 236px;
			height: 100%;
			background-color: #001529;
			box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
			position: fixed;
			z-index: 10;

			.logo {
				height: 64px;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 20px;
				cursor: pointer;

				img {
					height: 36px;
				}

				.logo-text {
					color: #fff;
					margin-left: 20px;
					font-size: 20px;
					animation: fade-in;
				}
			}

			.nav {
				margin-top: 16px;

				.el-menu {
					border-right: #001529;
				}

				.el-submenu__title {
					background-color: #001529 !important;
				}

				.el-menu-item {
					&.is-active {
						background-color: #409EFF !important;
						color: #fff !important;
					}
				}
			}
		}

		.container {
			position: relative;
			z-index: 9;
			/*height: 100%;*/
			width: 100%;
			padding: 64px 0 0 236px;
			box-sizing: border-box;
			overflow: auto;
			display: flex;
			flex-direction: column;

			.header {
				height: 64px;
				box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
				background-color: #fff;
				position: fixed;
				top: 0;
				right: 0;
				left: 236px;
				z-index: 10;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				padding: 0 20px;
				box-sizing: border-box;
				align-items: center;

				.header__main {
					flex-shrink: 1;
					flex-grow: 1;
				}

				.header__sub {
					flex-grow: 0;
					flex-shrink: 0;
					font-size: 13px;


				}
			}

			.layout__main {
				flex-grow: 1;
				flex-shrink: 0;
				position: relative;
				z-index: 9;
				width: 100%;
				padding: 16px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
			}

			.view__main {
				background-color: #fff;
				width: 100%;
				height: 100%;
				min-height: 100%;
				border-radius: 6px;
				flex-grow: 1;
				flex-shrink: 0;
			}
		}
	}

	.admin-dropdown {
		.el-dropdown-menu__item {
			.username {
				font-size: 13px;
				color: #222;
				margin: 0;
				line-height: 24px;
			}

			.user-phone {
				font-size: 12px;
				color: #999;
				margin: 0;
				line-height: 16px;
			}
		}
	}
</style>
